import styled from "styled-components/native";
import { /*RFValue*/ } from 'react-native-responsive-fontsize';
import Feather from "react-native-vector-icons/Feather";


export const Container = styled.View`
  flex: 1;
  height: 44px;
  align-items: center;
  flex-direction: row;
`;

export const StyledModal = styled.Modal`
  background-color: rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
  height: ${/*RFValue*/(363)};
`;

export const ModalOverlay = styled.View`
  flex: 1;
  background-color: rgba(0, 9, 23, 0.4);
  align-items: center;
  justify-content: center;
`;

export const ModalContent = styled.View`
  justify-content: space-between;
  background-color: ${({ theme }) => theme.colors["background-variant"]};
  width: 90%;
  height: ${/*RFValue*/(363)};
  border-radius: 10px;
`;

export const CalendarWrapper = styled.View`
  padding: 10px 20px 0;
`;

export const ButtonWrapper = styled.View`
  padding: 20px;
`;

export const Icon = styled(Feather)`
  color: ${({ theme }) => theme.colors.black};
  font-size: ${/*RFValue*/(24)}px;
`;